<template>
    <div class="box">
        <div class="box1" id="box1">

        </div>
        <div class="box1" id="box2">

        </div>
        <div class="box1" id="box3">

        </div>
    </div>
</template>
<script>
import { onMounted, reactive } from '@vue/runtime-core';
import * as echarts from 'echarts';
import axios from 'axios'
export default {
    setup(){

        let obj = reactive({
            data1:[],
            data2:[],
            data3:[],
            data4:[],
            data5:[],
            data6:[]
        })
        
        onMounted(()=>{
            show()
            show1()
            show2()

            getdata()
        })

        const getdata=async ()=>{
            let {data} = await axios.get('http://127.0.0.1:8000/qiu')
            if(data.code == 200){
                data.data1 = obj.data1
                data.data2 = obj.data2
                data.data3 = obj.data3
                data.data4 = obj.data4
                data.data5 = obj.data5
                data.data6 = obj.data6
            }
        }

        const show=()=>{
            var chartDom = document.getElementById('box1');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title:{
                    text:'年龄分析'
                },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
                }
            },
            legend: {
                data: ['男', '女']
            },
            xAxis: [
                {
                type: 'category',
                data: ['初中', '高中', '中技', '中专', '大专', '本科', '硕士','博士','博后'],
                axisPointer: {
                    type: 'shadow'
                }
                }
            ],
            yAxis: [
                {
                type: 'value',
                name: '人数',
                min: 0,
                max: 50,
                interval: 50,
                }
            ],
            series: [
                {
                name: '男',
                type: 'bar',
                data: [
                    1,8,9,10,5,24,26,38,19,44,42,31
                ]
                },
                {
                name: '女',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' ml';
                    }
                },
                data: [
                    50,40,30,20,10,15,25,35,45,9,38,42
                ]
                }
            ]
            };

            option && myChart.setOption(option);
        }
        const show1=()=>{
            var chartDom = document.getElementById('box2');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title:{
                    text:'经验分析'
                },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
                }
            },
            legend: {
                data: ['男', '女']
            },
            xAxis: [
                {
                type: 'category',
                data: ['一年', '二年', '三年', '三年-五年', '五年-十年', '十年以上'],
                axisPointer: {
                    type: 'shadow'
                }
                }
            ],
            yAxis: [
                {
                type: 'value',
                name: '人数',
                min: 0,
                max: 50,
                interval: 50,
                }
            ],
            series: [
                {
                name: '男',
                type: 'bar',
                data: [
                    1,8,9,10,5,24,26,38,19,44,42,31
                ]
                },
                {
                name: '女',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' ml';
                    }
                },
                data: [
                    50,40,30,20,10,15,25,35,45,9,38,42
                ]
                }
            ]
            };

            option && myChart.setOption(option);
        }
        const show2=()=>{
            var chartDom = document.getElementById('box3');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title:{
                    text:'职类分析'
                },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
                }
            },
            legend: {
                data: ['男', '女']
            },
            xAxis: [
                {
                type: 'category',
                data: ['服务员111', '文员', '销售代表', '家具', '人事经理', '前台', '技术总监','商务司机','普工'],
                axisPointer: {
                    type: 'shadow'
                }
                }
            ],
            yAxis: [
                {
                type: 'value',
                name: '人数',
                min: 0,
                max: 50,
                interval: 50,
                }
            ],
            series: [
                {
                name: '男',
                type: 'bar',
                data: [
                    1,8,9,10,5,24,26,38,19,44,42,31
                ]
                },
                {
                name: '女',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' ml';
                    }
                },
                data: [
                    50,40,30,20,10,15,25,35,45,9,38,42
                ]
                }
            ]
            };

            option && myChart.setOption(option);
        }


        return {

        }
    }
}
</script>

<style scoped>
.box{
    width: 98%;
    height: 100%;
    margin: 0 auto;
}
.box1{
    width: 100%;
    height: 200px;
    background: #f2f2f2;
    margin: 10px 0;
}
</style>